<template>
  <div class="k-form-design">
    <a href="http://kcz66.gitee.io/k-form-design" target="_blank" class="logo">
      <a-tooltip>
        <template slot="title">点击查看文档</template>
        <img src="http://kcz66.gitee.io/k-form-design/favicon.ico" alt />
      </a-tooltip>
    </a>
    <div class="content">
      <k-form-design 
        title="自定义表单哟" 
        toolbarsTop 
        :toolbars="toolbar"
        @save="handleSave"
      >
        <!-- 左侧操作区域插槽 start -->
        <template slot="left-action">
          <a-tooltip title="测试左侧插槽">
            <a>
              <a-icon type="experiment" />
            </a>
          </a-tooltip>
        </template>
      </k-form-design>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data(){
    return{
      toolbar:[ 'save', 'preview', 'importJson', 'exportJson', 'exportCode', 'reset', 'close' ]
    }
  },
  methods: {
    handleSave(values) {
      alert("触发保存方法");
      console.log(values);
    }
  }
};
</script>

<style lang='less' scoped>
.k-form-design {
  position: relative;
  .logo {
    width: 80px;
    position: absolute;
    left: 3%;
    top: 5px;
    display: block;
    background: white;
    img {
      width: 50px;
    }
  }
}
</style>